<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./vue.js"></script>
<style>
    /* [v-clock]{
        display: none;
    } */
    .active{
        color: red;
    }
</style>
<body>
    <!-- <div>今天正式进入vue的学习</div>
    <p>首先学习的是git代码拉去</p> -->
    <!-- 常见的指令 -->
    <!-- v-clock 避免js加载比较慢的时候页面出现{{}} -->
    <!--v-if 控制节点是否创建  -->
    <!--v-show 控制节点的显示隐藏的 -->
    <!--v-text 给标签绑定文本的  -->
    <!--v-html 给标签绑定html代码 -->
    <!-- v-on 绑定事件的 事件类型，还是原来js的事件类型 简写形式"@"-->
    <!-- v-bind: 可以用来绑定属性，使其值是一个变量 简写形式 ":" -->
    <!-- v-model 用来数据双向绑定的 一般作用在表单元素上 -->
    <!-- v-for 一般用来遍历数组生成标签，他也可以遍历对象 -->
    <div id="app">
        <p v-if="num>60">考试及格了</p>
        <p v-show="num>60">考试及格了</p>
        <p :class="{active:isActive}">{{message}}</p>
        <section v-text="message"></section>
        <div v-html="ht" @click="btn"></div>
        <img :src="url" alt="">
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        <ul>
            <li v-for="(item,index) in list" :key="index" @click="liClick(index)">
                <p>{{item.name}}</p>
                <img :src="item.url" alt="">
            </li>
        </ul>
    </div>
</body>
</html>
<script>
//    setTimeout(()=>{
    let app = new Vue({
      el:"#app", // vue 作用域
      data: { // 存放变量的
        msg: "我已经升入专六了",
        num: 61,
        message: "晚舟虽晚，但终会回归",
        ht: "<h2>我要当专六的天花板</h2>",
        url: "https://img1.baidu.com/it/u=1586603022,2450645299&fm=26&fmt=auto",
        isActive: true,
        list:[
            {name:'张三',url:'https://img1.baidu.com/it/u=1586603022,2450645299&fm=26&fmt=auto'},
            {name:'李四',url:'https://img1.baidu.com/it/u=1586603022,2450645299&fm=26&fmt=auto'},
            {name:'王五',url:'https://img1.baidu.com/it/u=1586603022,2450645299&fm=26&fmt=auto'},
            {name:'马六',url:'https://img1.baidu.com/it/u=1586603022,2450645299&fm=26&fmt=auto'}
         ]
      },
      methods: { // 存放方法的
        btn(){ // 绑定的点击事件
            console.log(this.msg);
        },
        liClick(i){
            console.log(i);
            this.render();
        },
        render(){
            console.log('我是render函数');
        }
      },
    })

    // 在构造函数中，this 指向的是实例化出来的对象
    console.log(app);

//    },1000)
   
</script>




